<template>
  <section class="content" id="content">
    <el-col>
      <el-button type="primary" @click="submitForm">保存并上报</el-button>
      <el-button type="success" @click="()=>{}">暂存</el-button>
      <el-button type="warning" @click="()=>{}">编辑</el-button>
      <el-button type="default">取消</el-button>
      <el-button type="default" @click="()=>{}">重置</el-button>
    </el-col>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="basic">
        <EntBasicInfo ref="entBasicInfo"></EntBasicInfo>
      </el-tab-pane>
      <el-tab-pane label="安全管理信息" name="secure">
        <component :is="activeName==='secure' ? SecureManageInfo : 'span'"></component>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script setup lang="ts">

/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

import {
  ref,
  reactive,
  onMounted,
  toValue,
  defineExpose,
  defineEmits,
  getCurrentInstance,
  inject,
} from "vue";
import {
  ElMessage,
  ElMessageBox,
  FormInstance,
  FormRules
} from "element-plus";
import type {TabsPaneContext} from 'element-plus'
import EntBasicInfo from '@/pages/ent/entBasicInfo/EntBasicInfo.vue'
import SecureManageInfo from "./SecureManageInfo.vue";

const activeName = ref('basic');
//企业基本信息信息
const entBasicInfo = ref<FormInstance>();

const handleClick = (tab: TabsPaneContext, event: Event) => {
  switch (activeName.value) {
    case 'secure':
      return SecureManageInfo
  }
}

//提交表单
const submitForm = async () => {
  switch (activeName.value) {
    case 'basic':
      entBasicInfo.value?.handleSubmit();
      break;
  }
}
//重置表单并清理验证信息
const handleReset = () => {
  entBasicInfo.value?.handleReset();
}

const resetFirstTab = async () => activeName.value = 'basic';

defineExpose({
  handleReset,
  resetFirstTab
})
</script>

<style scoped>

</style>
